<template>
  <div class="bg">
    <div class="login">
      <br /><br />
      <span>登录</span><br /><br />
      <i>账户：</i><input type="text" v-model="login_account" /><br /><br />
      <i>密码：</i><input type="password" v-model="login_password" /><br /><br /><br />

      <button class="but_res">
        <router-link to="/register">注册</router-link>
      </button>
      <button @click="login" class="but_log">登录</button>
    </div>
    <div class="font">欢 迎 来 到 聊 天 系 统</div>
  </div>
</template>

<script>
import { axiosLogin } from "../api/axios/login";

import person from "../api/ws/request";

export default {
  name: "VueCli2Login",
  data() {
    return {
      login_account: "1314520",
      login_password: "fy1314520",
      result: {},
      ws: "",
    };
  },

  created() {
    // 外部引入md5
    const md5 = document.createElement("script");
    md5.type = "text/javascript";
    md5.src = "https://cdn.bootcdn.net/ajax/libs/blueimp-md5/2.16.0/js/md5.js";
    document.body.appendChild(md5);
  },

  methods: {
    login() {
      const obj = {
        account: this.login_account,
        password: md5(this.login_password),
      };
      axiosLogin("get", obj)
        .then((res) => {
          // console.log(person);
          console.log(res);
          // person.connect(res.data);
          // this.isLogin(res.data)
        })
        .catch((err) => {
          console.log(err);
        });



    },

    // isLogin(user){
    //   if(user.id > 0){
    //     alert(`${user.name}欢迎回来` );

    //     setTimeout( ()=> {

    //     this.$router.push({
    //     name: "/newchat",
    //     params: {
    //       data: person.loginMessage
    //     }});

    //   }, 500);

    //   }
    //   else{
    //     alert(`账号密码错误！！！`);
    //   }
    // }



  },
};
</script>

<style lang="less" scoped>
.bg {
  width: 100%;
  height: 100vh;
  background: url(https://ts1.cn.mm.bing.net/th/id/R-C.c7eb9f9882c230bd3a6003a949643ab7?rik=F4Ac%2bjXctFKTlg&riu=http%3a%2f%2fwww.yulumi.cn%2fgl%2fuploads%2fallimg%2f201120%2f3-201120130101.jpg&ehk=mqcFMT9pwWyaUvJRaSxIRld678vuSDVyqjlxPHDAhaM%3d&risl=&pid=ImgRaw&r=0)
    no-repeat;
  background-size: 100% 100%;
}

.login {
  position: relative;
  top: 200px;
  width: 600px;
  height: 300px;
  margin: 0 auto;
  // background: palegoldenrod;
  text-align: center;
  background: #eee;
  opacity: 0.7;
  text-align: center;
  box-shadow: 5px 10px 10px 10px #999;
  border-radius: 20px;

  & > span {
    font-size: 30px;
    font-weight: bolder;
    font-family: "微软雅黑";
    color: #322;
  }

  & > i {
    font-size: 20px;
    font-style: italic;
    color: #322;
  }

  & > input {
    width: 300px;
    height: 20px;
    outline: none;
    background: #eee;
    border-top: 0px;
    border-left: 0px;
    border-right: 0px;
    border-bottom: 3px solid #666;
    font-size: large;
    font-style: italic;
  }

  & > .but_log {
    float: left;
    margin-left: 30px;
    width: 100px;
    height: 40px;
    background: paleturquoise;
    font-size: 20px;
    font-family: "宋体";
    border: 1px solid #666;
    border-radius: 5px;

    &:hover {
      background: skyblue;
      color: snow;
    }
  }

  & > .but_res {
    float: right;
    margin-right: 30px;
    width: 100px;
    height: 40px;
    background: paleturquoise;
    font-size: 20px;
    font-family: "宋体";
    border: 1px solid #666;
    border-radius: 5px;

    &:hover {
      background: skyblue;
      color: snow;
    }

    & > a {
      text-decoration: none;
      color: #222;
    }
  }
}

.font {
  position: absolute;
  font-size: 40px;
  width: 600px;
  height: 50px;
  // background: palegoldenrod;
  top: 75px;
  left: 35%;
  font-weight: bolder;
  font-family: "微软雅黑";
  color: peru;
  text-shadow: 10px 10px 10px #999;
}
</style>
